<template>
  <uni-popup ref="popup" type="bottom" :safe-area="safeArea" @change="popChange">
    <view class="date-time-picker" v-if="showPopPicker">
      <!-- <view class="date-time-mask" @click.stop="hide"></view> -->
      <view class="date-time-container" :class="{'safe-area-padding':!safeArea}" @click.stop="handleEvent">
        <view class="time-picker-tool">
          <view class="cancel-base" :class="[cancelButtonClass]" @click.stop="close">
            <text>{{cancelButtonText}}</text>
          </view>
          <view :class="[toolBarTitleClass]">
            <text>{{toolBarTitle}}</text>
          </view>
          <view class="confirm-base" :class="[confirmButtonClass]" @click.stop="confirm">
            <text>{{confirmButtonText}}</text>
          </view>
        </view>
        <view class="picker-tab" v-if="isShowRange">
          <view @click="dateTabChange(1)" class="picker-tab-item"
            :style="[rangeBtnStyle,dateTab==1?rangeBtnActiveStyle:'']">{{pickerData.startTime}}</view>
          至
          <view @click="dateTabChange(2)" class="picker-tab-item"
            :style="[rangeBtnStyle,dateTab==2?rangeBtnActiveStyle:'']">{{pickerData.endTime}}</view>
        </view>
        <picker-view class="picker-view" :indicator-style="popupIndicatorStyleString" :value="dateTime"
          @change="dateTimePickerChange" @pickstart="dateTimePickerStart" @touchstart="dateTimePickerStart">
          <picker-view-column data-id='year' v-if='isShowYear'>
            <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
          </picker-view-column>
          <picker-view-column data-id='month' v-if='isShowMonth'>
            <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
          </picker-view-column>
          <picker-view-column data-id='day' v-if='isShowDay'>
            <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
          </picker-view-column>
          <picker-view-column data-id='hour' v-if='isShowHour'>
            <view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
          </picker-view-column>
          <picker-view-column data-id='minute' v-if='isShowMinute'>
            <view class="item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
          </picker-view-column>
          <picker-view-column data-id='second' v-if='isShowSecond'>
            <view class="item" v-for="(item,index) in seconds" :key="index">{{item}}秒</view>
          </picker-view-column>
          <picker-view-column data-id='week' v-if='isShowWeek'>
            <view class="item" v-for="(item,index) in weeks" :key="index">{{item}}</view>
          </picker-view-column>
          <picker-view-column data-id='quarter' v-if='isShowQuarter'>
            <view class="item" v-for="(item,index) in quarters" :key="index">{{item}}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
  import {
    getOneMonthDays,
    getTimeArray,
    addZero,
    removeZero,
    getIndexOfArray,
    getQuarterArray,
    isOnlyTime,
    isRange,
    getTotalWeeks,
    getFirstAndLastDate
  } from './uitls/util.js'
  const [year, month, date, hour, minute, second] = getTimeArray(new Date());
  export default {
    name: 'TimePicker',
    props: {
      minDate: { //最小选择时间 
        type: Object,
        default: function() {
          return {
            year: 1970,
            month: 1,
            date: 1,
            hour: 0,
            minute: 0,
            second: 0
          }
        }
      },
      maxDate: { //最大选择时间 
        type: Object,
        default: function() {
          return {
            year,
            month,
            date,
            hour: 23,
            minute: 59,
            second: 59
          }
        }
      },
      type: {
        /**
         * date 年月日
         * year-month 年月
         * year 年
         * datetime 年月日 时分
         * datetime-all 年月日 时分秒
         * time 时分秒
         * hour-minute 时分
         * week 周
         * quarter 季度
         * year-range 年-范围
         * year-month-range 年月-范围
         * date-range 年月日-范围
         * datetime-range 年月日 时分-范围
         * datetime-all-range 年月日 时分秒-范围
         * time-range 时分秒-范围
         */
        type: String,
        default: 'date'
      },
      defaultData: {
        type: Object,
        default: function() {
          return {
            startTime: "", //默认开始日期/时间 yyyy-mm-dd (HH:MM:SS)
            endTime: "", //默认结束日期/时间 yyyy-mm-dd (HH:MM:SS)
            year: "", //默认年份		yyyy		
            month: "", //默认年-月份 yyyy-mm
            week: "", //默认周 2020 第1周
            quarter: "", //默认季度 2020 一季度
          }
        }
      },
      popIindicatorStyle: {
        type: Object,
        default: null
      },
      rangeBtnStyle: { // 范围选择按钮样式
        type: Object,
        default: function() {
          return {
            color: '#666'
          }
        }
      },
      rangeBtnActiveStyle: { // 范围选择按钮激活样式
        type: Object,
        default: function() {
          return {
            color: '#049bff',
            borderColor: '#049bff'
          }
        }
      },
      cancelButtonText: {
        type: String,
        default: '取消'
      },
      cancelButtonClass: {
        type: String,
        default: 'cancel-btn-lingfeng'
      },
      toolBarTitle: {
        type: String,
        default: ''
      },
      toolBarTitleClass: {
        type: String,
        default: 'tool-title'
      },
      confirmButtonText: {
        type: String,
        default: '确定'
      },
      confirmButtonClass: {
        type: String,
        default: 'confirm-btn'
      },
      safeArea: {
        type: Boolean,
        default: true
      },
      en: {
        type: Boolean,
        default: false
      },
      weekType: {
        type: String,
        default: 'firstWeek' // firstWeek fullWeek firstDay
      }
    },
    data() {
      return {
        isPickend: true,
        showPopPicker: false,
        dateTab: 1,
        popupIndicatorStyleString: "",
        dateTime: [], //picker-view-column 选中的值
        lastDateTime: [], //选中的时间,小于10的数不加0
        days: [], //可选的日列表
        months: [], //可选的月列表
        quarters: getQuarterArray(1, 12), //可选的季度列表
        weeks: [], //可选的周列表
        hours: [], //可选的时列表
        minutes: [], //可选的分列表
        seconds: [], //可选的秒列表
        datestring: "", //选中的时间,格式化后的展示
        allQuarter: [{
            name: "一季度",
            start: "01-01",
            end: "03-31"
          },
          {
            name: "二季度",
            start: "04-01",
            end: "06-30"
          },
          {
            name: "三季度",
            start: "07-01",
            end: "09-30"
          },
          {
            name: "四季度",
            start: "10-01",
            end: "12-31"
          }
        ],
        pickerData: {
          startTime: "",
          endTime: "",
          month: "",
          quarter: "",
          year: ""
        }
      };
    },
    methods: {
      showPop() {
        this.dateTab = 1;
        this.getPopIndicatorStyle();
        this.showPopPicker = true;
        this.tempTime = new Date().getTime();
        this.$refs.popup.open();
      },
      close() {
        this.$emit('close');
        this.showPopPicker = false;
        this.$refs.popup.close();
        this.pickerData = {
          startTime: "",
          endTime: "",
          month: "",
          quarter: "",
          year: ""
        }
        this.lastDateTime = [];
      },
      dateTabChange(i) {
        if (this.dateTab == i) {
          return;
        }
        this.dateTab = i;
        this.datestring = i == 2 ? this.pickerData.endTime : this.pickerData.startTime;
        this.initDateTime();
        this.tempTime = new Date().getTime();
      },
      dateTimePickerStart() {
        this.isPickend = false;
      },
      dateTimePickerChange(e) {
        if (new Date().getTime() - this.tempTime < 100) {
          //dateTimePickerChange 小程序端有时点击dateTabChange就触发了change
          // console.log("无效滚动")
          return;
        }
        this.tempTime = new Date().getTime();
        let columns = [...e.target.value];
        let currentDateList = [];

        if (isOnlyTime(this.type)) {
          currentDateList = [this.hours[columns[0]], this.minutes[columns[1]], this.seconds[columns[2]]];
          let tag = 2;
          if (currentDateList[1] != this.lastDateTime[1]) {
            tag = 3;
          }
          let minTag = currentDateList[0] == this.realMinDate.hour;
          let maxTag = currentDateList[0] == this.realMaxDate.hour;
          if (tag > 2) {
            minTag = minTag && currentDateList[1] == this.realMinDate.minute;
            maxTag = maxTag && currentDateList[1] == this.realMaxDate.minute;
          }

          this.getHMSColumnsData(currentDateList, this.lastDateTime, tag, minTag, maxTag);
        } else if (this.type === "week") {
          if (this.lastDateTime[0] != this.years[columns[0]]) {
            this.getWeeks(this.years[columns[0]]);
          }
        } else if (this.type === "quarter") {
          if (this.lastDateTime[0] != this.years[columns[0]]) {
            if (columns[0] == 0) {
              this.quarters = getQuarterArray(this.realMinDate.month, 12);
            } else if (columns[0] == this.years.length - 1) {
              this.quarters = getQuarterArray(1, this.realMaxDate.month);
            } else {
              this.quarters = getQuarterArray(1, 12);
            }
          }
        } else {
          currentDateList = [this.years[columns[0]], this.months[columns[1]], this.days[columns[2]], this.hours[columns[
            3]], this.minutes[columns[4]], this.seconds[columns[5]]];
          this.getColumnsData(currentDateList, this.lastDateTime);
        }
        setTimeout(() => {
          if (this.type === "week") {
            if (this.lastDateTime[0] != this.years[columns[0]]) {
              let index = columns[1];
              index = this.weeks.findIndex(val => val == this.lastDateTime[1]);
              if (index < 0) {
                index = columns[0] == 0 ? 0 : this.weeks.length - 1;
              }
              columns.splice(1, 1, index)
            }
          } else if (this.type === "quarter") {
            if (this.lastDateTime[0] != this.years[columns[0]]) {
              let index = columns[1];
              index = this.quarters.findIndex(val => val == this.lastDateTime[1]);
              if (index < 0) {
                index = columns[0] == 0 ? 0 : this.quarters.length - 1;
              }
              columns.splice(1, 1, index)
            }
          } else {
            let names = ['year', 'month', 'day', 'hour', 'minute', 'second'];
            if (isOnlyTime(this.type)) {
              names = names.slice(3);
            }
            const arr = [];
            let i = 1;
            while (i < currentDateList.length && currentDateList[i] != undefined) {
              const colName = names[i] + 's';
              let index = this[colName].findIndex(val => val == currentDateList[i]);
              if (index < 0) {
                index = currentDateList[i] <= this[colName][0] ? 0 : this[colName].length - 1;
              }
              arr.push(index);
              i++;
            }
            columns.splice(1, columns.length - 1, ...arr);
          }
          columns.forEach((column, index) => {
            this.dateTime.splice(index, 1, column);
          })
          this.formatDate();
        }, 50)
      },
      formatDate() { //选中的时间记录 及格式化
        let names = ['year', 'month', 'day', 'hour', 'minute', 'second'];
        let dateString, formatDateArray = [];
        if (['date', 'year', 'year-month', 'year-range', 'year-month-range', 'date-range'].includes(this.type)) {
          formatDateArray = this.dateTime.map((item, index) => {
            let num = this[names[index] + 's'][item] ? this[names[index] + 's'][item] : this[names[index] + 's'][
              this[names[index] + 's'].length - 1
            ];
            return addZero(num);
          })
          dateString = formatDateArray.join('-');
        } else if (isOnlyTime(this.type)) {
          names = names.splice(3);
          formatDateArray = this.dateTime.map((item, index) => {
            return addZero(this[names[index] + 's'][item]);
          })
          dateString = formatDateArray.join(':');
        } else if (this.type === "week") {
          dateString = this.years[this.dateTime[0]] + " " + this.weeks[this.dateTime[1]];
        } else if (this.type === "quarter") {
          dateString = this.years[this.dateTime[0]] + " " + this.quarters[this.dateTime[1]];
        } else {
          let name1 = names.splice(0, 3);
          formatDateArray = this.dateTime.map((item, index) => {
            if (index > 2) {
              return addZero(this[names[index - 3] + 's'][item]);
            } else {
              return addZero(this[name1[index] + 's'][item]);
            }
          })
          dateString = formatDateArray.splice(0, 3).join('-') + ' ' + formatDateArray.join(':');
        }
        if (['week', 'quarter'].includes(this.type)) {
          this.lastDateTime = dateString.split(/[-: ]/);
        } else {
          let tempDate = [];
          dateString.split(/[-: ]/).forEach((val) => {
            tempDate.push(parseInt(removeZero(val)));
          })
          this.lastDateTime = tempDate;
        }

        switch (this.type) {
          case "date":
          case "datetime":
          case "datetime-all":
          case "time":
          case "hour-minute":
          case "year-range":
          case "year-month-range":
          case "date-range":
          case "datetime-range":
          case "datetime-all-range":
          case "time-range":
            if (this.dateTab == 2) {
              this.pickerData.endTime = dateString;
            } else {
              this.pickerData.startTime = dateString;
            };
            break;
          case "year-month":
            this.pickerData.month = dateString;
            break;
          case "year":
            this.pickerData.year = dateString;
            break;
          case "week":
            this.pickerData.week = dateString;
            break;
          case "quarter":
            this.pickerData.quarter = dateString;
            break;
        }
        this.isPickend = true;
        // this.$emit('change', dateString)
      },
      getPopIndicatorStyle() {
        if (this.popIindicatorStyle) {
          for (let key in this.popIindicatorStyle) {
            this.popupIndicatorStyleString += `${key}:${this.popIindicatorStyle[key]};`
          }
        }
      },
      initDefaultDate() { //初始化起始时间
        const pickerData = {};
        Object.keys(this.defaultData).forEach(key => {
          pickerData[key] = this.defaultData[key];
        })
        let [y, m, d] = getTimeArray(new Date());
        if (this.type === 'year') {
          pickerData.year = pickerData.year || y;
          this.datestring = this.getDefaultYearMonth(pickerData.year, this.type);
        } else if (this.type === 'year-month') {
          pickerData.month = pickerData.month || (y + '-' + addZero(m));
          this.datestring = this.getDefaultYearMonth(pickerData.month, this.type);
        } else if (this.type === 'year-range') {
          pickerData.startTime = pickerData.startTime || y;
          pickerData.endTime = pickerData.endTime || y;
          this.datestring = this.getDefaultYearMonth(pickerData.startTime, this.type);
        } else if (this.type === 'year-month-range') {
          pickerData.startTime = pickerData.startTime || (y + '-' + addZero(m));
          pickerData.endTime = pickerData.endTime || (y + '-' + addZero(m));
          this.datestring = this.getDefaultYearMonth(pickerData.startTime, this.type);
        } else if (this.type === 'quarter') {
          this.datestring = pickerData.quarter;
        } else if (this.type === 'week') {
          this.datestring = pickerData.week;
        } else {
          // 处理默认开始时间和结束时间
          let startTime = isOnlyTime(this.type) ? y + "/" + m + "/" + d + " " + pickerData.startTime : pickerData
            .startTime;
          startTime = this.getMinDate(startTime).replace(/-/g, "/");
          pickerData.startTime = isNaN(Date.parse(startTime)) ? this.formatPickerData(new Date(), this.type) : this
            .formatPickerData(startTime, this.type);
          if (isRange(this.type)) {
            let endTime = isOnlyTime(this.type) ? y + "/" + m + "/" + d + " " + pickerData.endTime : pickerData.endTime;
            endTime = this.getMinDate(endTime).replace(/-/g, "/");
            pickerData.endTime = isNaN(Date.parse(endTime)) ? this.formatPickerData(new Date(), this.type) : this
              .formatPickerData(endTime, this.type);
          }
          this.datestring = pickerData.startTime;
        }

        this.$nextTick(() => {
          Object.keys(pickerData).forEach(key => {
            this.pickerData[key] = pickerData[key];
          })
        })
      },
      initDateTime() { //初始化picker-view选择的时间
        let value;
        if (this.datestring && this.datestring.length > 0) {
          if (['year', 'year-range'].includes(this.type)) {
            value = new Date(this.datestring, 0);
          } else if (isOnlyTime(this.type)) {
            let date = new Date();
            let ary = this.datestring.split(':');
            ary.forEach((item, index) => {
              if (index == 0) {
                date.setHours(item)
              } else if (index == 1) {
                date.setMinutes(item)
              } else if (index == 2) {
                date.setSeconds(item)
              }
            })
            value = date;
            const currentHMS = getTimeArray(value).slice(3);
            const lastHMS = [-1, -1, -1];
            this.getHMSColumnsData(currentHMS, lastHMS, 1, true, true);
          } else if (['year-month', 'year-month-range'].includes(this.type)) {
            let datestring = this.datestring.replace(/-/g, '/');
            value = isNaN(Date.parse(datestring)) ? new Date(datestring + '/01') : new Date(datestring);
          } else {
            value = new Date(this.datestring.replace(/-/g, '/'));
          }
        } else {
          value = new Date();
        }
        let len, timeArray, index;
        let array = ['week', 'quarter'].includes(this.type) ? this.datestring.split(" ") : getTimeArray(value);
        let [year, month, day, hour, minute, second] = array;
        if (this.isShowWeek) {
          this.getWeeks(year ? year : this.realMinDate.year);
        } else if (!isOnlyTime(this.type)) {
          this.getColumnsData(array);
        }
        let names = ['year', 'month', 'day', 'hour', 'minute', 'second'];
        switch (this.type) {
          case "date":
          case "time":
          case "date-range":
          case "time-range":
            len = 3;
            break;
          case "year-month":
          case "year-month-range":
          case "hour-minute":
          case "week":
          case "quarter":
            len = 2;
            break;
          case "year":
          case "year-range":
            len = 1;
            break;
          case "datetime":
          case "datetime-range":
            len = 5;
            break;
          case "datetime-all":
          case "datetime-all-range":
            len = 6;
            break;
        }
        timeArray = new Array(len).fill(0);
        if (isOnlyTime(this.type)) {
          names = names.slice(3);
          array = array.slice(3);
        } else if (this.type === "week") {
          names = ["year", "week"];
        } else if (this.type === "quarter") {
          names = ["year", "quarter"];
        } else {
          names = names.slice(0, len);
          array = array.slice(0, len);
        }
        // setTimeout(() => {
        timeArray = timeArray.map((item, index) => {
          const name = names[index];
          return getIndexOfArray(array[index], this[name + 's'])
        })
        this.dateTime = timeArray;
        this.lastDateTime = array;
        this.formatDate();
        // },100)
      },
      initTimeData(end, start) { //设置最大最小值
        let timeArray = [];
        while (start <= end) {
          timeArray.push(start);
          start++;
        }
        return timeArray;
      },
      getColumnsData(currentDateList, lastDateTime = [-1, -1, -1, -1, -1, -1]) {
        let min = '';
        let max = '';
        let minTag = false;
        let maxTag = false;
        let currentYear = currentDateList[0];
        let currentMonth = currentDateList[1];
        let currentDate = currentDateList[2];
        let currentHMS = currentDateList.slice(3);
        let lastHMS = lastDateTime.slice(3);
        if (this.isShowMonth || this.isShowQuarter) {
          if (currentYear == this.realMinDate.year) {
            minTag = true;
          }
          if (currentYear == this.realMaxDate.year) {
            maxTag = true;
          }
          if (currentYear != lastDateTime[0]) {
            min = 1;
            max = 12;
            if (minTag) {
              min = this.realMinDate.month;
              currentMonth = currentMonth < min ? min : currentMonth;
            }
            if (maxTag) {
              max = this.realMaxDate.month;
              currentMonth = currentMonth > max ? max : currentMonth;
            }
            this.isShowMonth && (this.months = this.initTimeData(max, min));
            this.isShowQuarter && (this.quarters = getQuarterArray(min, max));
          }
        }
        if (this.isShowDay) {
          minTag = minTag && currentMonth == this.realMinDate.month;
          maxTag = maxTag && currentMonth == this.realMaxDate.month;
          if (currentMonth != lastDateTime[1] || max) {
            min = 1;
            max = getOneMonthDays(currentYear, currentMonth - 1);
            if (minTag) {
              min = this.realMinDate.date;
              currentDate = currentDate < min ? min : currentDate;
            }
            if (maxTag) {
              max = this.realMaxDate.date;
              currentDate = currentDate > max ? max : currentDate;
            }
            this.days = this.initTimeData(max, min);
          }
        }
        if (this.isShowHour) {
          // 判断时分秒列表是否需要重新赋值
          let tag = 0;
          if (currentHMS[1] != lastDateTime[4]) {
            tag = 3;
          }
          if (currentHMS[0] != lastDateTime[3]) {
            tag = 2;
          }
          if (max || currentDate != lastDateTime[2]) {
            tag = 1;
          }
          minTag = minTag && currentDate == this.realMinDate.date;
          maxTag = maxTag && currentDate == this.realMaxDate.date;
          if (tag > 1) {
            minTag = minTag && currentHMS[0] == this.realMinDate.hour;
            maxTag = maxTag && currentHMS[0] == this.realMaxDate.hour;
          }
          if (tag > 2) {
            minTag = minTag && currentHMS[1] == this.realMinDate.minute;
            maxTag = maxTag && currentHMS[1] == this.realMaxDate.minute;
          }
          this.getHMSColumnsData(currentHMS, lastHMS, tag, minTag, maxTag);
        }
      },

      getHMSColumnsData(currentHMS, lastHMS, tag, minTag, maxTag) {
        let [currentHour, currentMinute, currentSecond] = currentHMS;
        let min = "";
        let max = "";
        if (tag == 1) {
          min = 0;
          max = 23;
          if (minTag) {
            min = this.realMinDate.hour;
            currentHour = currentHour < min ? min : currentHour;
          }
          if (maxTag) {
            max = this.realMaxDate.hour;
            currentHour = currentHour > max ? max : currentHour;
          }
          this.hours = this.initTimeData(max, min);
          tag = 2;
        }

        if (tag == 2) {
          minTag = minTag && currentHour == this.realMinDate.hour;
          maxTag = maxTag && currentHour == this.realMaxDate.hour;
          min = 0;
          max = 59;
          if (minTag) {
            min = this.realMinDate.minute;
            currentMinute = currentMinute < min ? min : currentMinute;
          }
          if (maxTag) {
            max = this.realMaxDate.minute;
            currentMinute = currentMinute > max ? max : currentMinute;
          }
          this.minutes = this.initTimeData(max, min);
          tag = 3;
        }

        if (tag = 3) {
          minTag = minTag && currentMinute == this.realMinDate.minute;
          maxTag = maxTag && currentMinute == this.realMaxDate.minute;
          min = 0;
          max = 59;
          if (minTag) {
            min = this.realMinDate.second;
          }
          if (maxTag) {
            max = this.realMaxDate.second;
          }
          this.seconds = this.initTimeData(max, min);
        }
      },
      getWeeks(year) {
        let startDate = year + '/01/01',
          endDate = year + '/12/31';
        if (year <= this.realMinDate.year) {
          startDate = this.realMinDate.year + '/' + addZero(this.realMinDate.month) + '/' + addZero(this.realMinDate
            .date);
        }
        if (year >= this.realMaxDate.year) {
          endDate = this.realMaxDate.year + '/' + addZero(this.realMaxDate.month) + '/' + addZero(this.realMaxDate
            .date);
        }
        const [start, end] = getTotalWeeks(startDate, endDate, this.en, this.weekType);
        this.weeks = this.initTimeData(end, start).map(item => `第${item}周`);
      },
      getWeekDate() {
        let [year, w] = this.pickerData.week.split(" ");
        let week = w.slice(1, -1);
        let {
          start,
          end
        } = getFirstAndLastDate(year, week, this.en, this.weekType);
        start = this.formatPickerData(this.getMinDate(start), 'date');
        end = this.formatPickerData(this.getMAxDate(end), 'date');
        return [this.pickerData.week, start, end];
      },
      getQuarterDate() {
        let [y, q] = this.pickerData.quarter.split(" ");
        let index = getIndexOfArray(q, this.allQuarter, "name");
        let start = y + "-" + this.allQuarter[index].start;
        let end = y + "-" + this.allQuarter[index].end;
        start = this.formatPickerData(this.getMinDate(start), 'date');
        end = this.formatPickerData(this.getMAxDate(end), 'date');
        return [this.pickerData.quarter, start, end];
      },
      getMinDate(date) {
        let defaultMInArr = [1970, 1, 1, 0, 0, 0];
        let minDate =
          `${this.realMinDate.year||defaultMInArr[0]}/${this.realMinDate.month||defaultMInArr[1]}/${this.realMinDate.date||defaultMInArr[2]} ${this.realMinDate.hour||defaultMInArr[3]}:${this.realMinDate.minute||defaultMInArr[4]}:${this.realMinDate.second||defaultMInArr[5]}`;
        let repDate = date.replace(/-/g, "/");
        let datetime = isNaN(Date.parse(repDate)) ? new Date().getTime() : new Date(repDate).getTime();
        return datetime > new Date(minDate).getTime() ? date : minDate.replace(/\//g, "-");
      },
      getMAxDate(date) {
        let maxDate =
          `${this.realMaxDate.year}/${this.realMaxDate.month}/${this.realMaxDate.date} ${this.realMaxDate.hour}:${this.realMaxDate.minute}:${this.realMaxDate.second}`;
        let repDate = date.replace(/-/g, "/");
        let datetime = isNaN(Date.parse(repDate)) ? new Date().getTime() : new Date(repDate).getTime();
        return datetime < new Date(maxDate).getTime() ? date : maxDate;
      },
      getDefaultYearMonth(date, type) {
        let minDate = ['year', 'year-range'].includes(this.type) ? this.realMinDate.year : (this.realMinDate.year +
          "-" + addZero(this.realMinDate.month));
        let maxDate = ['year', 'year-range'].includes(this.type) ? this.realMaxDate.year : (this.realMaxDate.year +
          "-" + addZero(this.realMaxDate.month));
        return date < minDate ? minDate : date > maxDate ? maxDate : date;
      },
      //popup
      show() {
        this.$nextTick(() => {
          this.initDefaultDate();
          this.initDateTime();
          this.showPop();
        })
      },
      handleEvent() {
        return;
      },
      confirm() {
        if (this.confirm.target) {
          return;
        }
        this.confirm.target = true;
        if (!this.isPickend) {
          return;
        }
        this.confirm.target = null;
        let val;
        switch (this.type) {
          case "date":
          case "datetime":
          case "datetime-all":
          case "time":
          case "hour-minute":
            val = this.pickerData.startTime;
            break;
          case "year":
            val = this.pickerData.year;
            break;
          case "year-month":
            val = this.pickerData.month;
            break;
          case "week":
            val = this.getWeekDate();
            break;
          case "quarter":
            val = this.getQuarterDate();
            break;
          case "year-range":
          case "year-month-range":
          case "date-range":
          case "datetime-range":
          case "datetime-all-range":
          case "time-range":
            let start = this.pickerData.startTime;
            let end = this.pickerData.endTime;
            if (start > end) {
              val = [end, start];
            } else {
              val = [start, end];
            }
            break;
          default:
            break;
        }
        this.$emit("change", val)
        this.close();
      },
      popChange(val) {
        if (!val.show) {
          this.$emit("close");
          this.showPopPicker = false;
          this.$parent.pageScrollFlag = true;
        }
      },
      formatPickerData(date, type) {
        let [y, m, d, HH, MM, SS] = getTimeArray(new Date(date));
        m = addZero(m);
        d = addZero(d);
        HH = addZero(HH);
        MM = addZero(MM);
        SS = addZero(SS);
        switch (type) {
          case "date":
          case "date-range":
            return y + "-" + m + "-" + d;
          case "datetime":
          case "datetime-range":
            return y + "-" + m + "-" + d + " " + HH + ":" + MM;
          case "datetime-all":
          case "datetime-all-range":
            return y + "-" + m + "-" + d + " " + HH + ":" + MM + ":" + SS;
          case "time":
          case "time-range":
            return HH + ":" + MM + ":" + SS;
          case "hour-minute":
            return HH + ":" + MM;
          default:
            return "";
            break;
        }

      }
    },
    computed: {
      years() { //可选的年列表
        return this.initTimeData(this.realMaxDate.year, this.realMinDate.year);
      },
      isShowYear() {
        return !['time', 'hour-minute', 'time-range'].includes(this.type);
      },
      isShowMonth() {
        return !['year', 'time', 'hour-minute', 'week', 'quarter', 'year-range', 'time-range'].includes(this.type);
      },
      isShowDay() {
        return ['date', 'datetime', 'datetime-all', 'date-range', 'datetime-range', 'datetime-all-range'].includes(this
          .type);
      },
      isShowHour() {
        return !['date', 'year-month', 'year', 'week', 'quarter', 'year-range', 'year-month-range', 'date-range']
          .includes(this.type);
      },
      isShowRange() {
        return isRange(this.type);
      },
      isShowMinute() {
        return !['date', 'year-month', 'year', 'week', 'quarter', 'year-range', 'year-month-range', 'date-range']
          .includes(this.type);
      },
      isShowSecond() {
        return ['time', 'datetime-all', 'datetime-all-range', 'time-range'].includes(this.type);
      },
      isShowQuarter() {
        return this.type === 'quarter';
      },
      isShowWeek() {
        return this.type === 'week';
      },
      realMinDate() {
        return {
          year: 1970,
          month: 1,
          date: 1,
          hour: 0,
          minute: 0,
          second: 0,
          ...this.minDate
        }
      },
      realMaxDate() {
        return {
          year,
          month,
          date,
          hour: 23,
          minute: 59,
          second: 59,
          ...this.maxDate
        }
      }
    },
    watch: {
      isPickend(val) {
        if (val && this.confirm.target) {
          this.confirm.target = null;
          this.confirm();
        }
      }
    }
  }
</script>

<style lang="scss">
  // popup
  .date-time-picker {
    width: 100%;
    height: 40vh;
    border-top-right-radius: 10rpx;
    border-top-left-radius: 10rpx;

    .date-time-mask {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba($color: #000000, $alpha: .5);
      z-index: 998;
    }

    .date-time-container {
      width: 100%;
      height: 100%;
      border-top-right-radius: 10rpx;
      border-top-left-radius: 10rpx;
      box-sizing: border-box;
      padding-bottom: 20rpx;
      background-color: #f6f6f6;
      display: flex;
      flex-direction: column;

      .time-picker-tool {
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 32rpx;

        .cancel-base {
          padding: 0 32rpx;
          box-sizing: border-box;
        }

        .cancel-btn-lingfeng {
          color: #969799;
        }

        .tool-title {
          font-weight: 500;
          font-size: 32rpx;
          max-width: 50%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .confirm-base {
          padding: 0 32rpx;
          box-sizing: border-box;
        }

        .confirm-btn {
          color: #049bff;
        }
      }

      .picker-view {
        width: 100%;
        flex: 1;

        .item {
          font-size: 34rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }

    .safe-area-padding {
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

  .picker-tab {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 20rpx 0;
  }

  .picker-tab-item {
    box-sizing: border-box;
    width: 260rpx;
    text-align: center;
    padding: 4rpx 30rpx;
    border: 2rpx solid #666;
    border-radius: 20rpx;
    font-size: 30rpx;
  }
</style>